<script setup>
import { getSupplierPageApi } from '@/api/supplier'
import { onMounted, ref } from 'vue'
import AddOrUpdate from './componets/addOrUpdate.vue'
import Delete from './componets/delete.vue'

const deleteRef = ref('deleteRef')
const addOrUpdateRef = ref('addOrUpdateRef')
const supplierList = ref([])

const handleDelete = (row)=>{
  deleteRef.value.deleteById(row.id)
}
const handleEdit = (row)=>{
  addOrUpdateRef.value.dialogFormVisible = true
  addOrUpdateRef.value.title = '修改供应商'
  addOrUpdateRef.value.reset()
  addOrUpdateRef.value.supplierForm = JSON.parse(JSON.stringify(row)) // 深拷贝
  // 设置级联选择器为禁用状态
  // addOrUpdateRef.value.isPcdDisabled = true
}

const add = ()=>{
  addOrUpdateRef.value.dialogFormVisible = true
  addOrUpdateRef.value.title = '添加供应商'
  addOrUpdateRef.value.reset()
}

const getPage = async ()=>{
    const result = await getSupplierPageApi()
    supplierList.value = result.data
}



onMounted(()=>{
  getPage()
})
</script>

<template>
  <el-button type="primary" @click="add">添加</el-button>

  <el-table :data="supplierList" style="width: 100%">
    <el-table-column type="index" label="序号" />
    <el-table-column prop="supplierName" label="供应商名字" />
    <el-table-column prop="linkName" label="联系人名字" />
    <el-table-column prop="address" label="详细地址" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <AddOrUpdate ref="addOrUpdateRef" @refresh="getPage" />
  <Delete ref="deleteRef" @refresh="getPage" />
</template>